<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>OS3Grid - Grid for Web Sites</title>
	<link type="text/css" rel="stylesheet" href="../examples/css/examples.css" />
	<link type="text/css" rel="stylesheet" href="../os3grid.css" />
	<script src="../os3grid.js" type="text/javascript"></script>
	<script src="../form_validators.js" type="text/javascript"></script>
</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid - Grid for Web Sites</h2>
	<h3 class="center">Current version: 0.6 - release date: Sep, 26 2005</h3>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

<div id="block_left">
	<div class="menu_title">OS3Grid links</div>

	<div>
		<a href="down.html">Download</a><br />
		<a href="docs.html">Documentation</a><br />
		<a href="../examples/index.html">Examples</a><br />
		<a href="donate.html">Make a Donation</a><br />
		<a href="license.html">LGPL License</a><br />
	</div>

	<div align="center">
	<a href="http://sourceforge.net" target="_blank"><img src="http://sourceforge.net/sflogo.php?group_id=132180&amp;type=2" width="125" height="37" border="0" alt="SourceForge.net Logo" /></a>
	</div>


	<div class="menu_title">Rate OS3Grid</div>
	<div align="center">
		
		<form method="post" action="http://freshmeat.net/rate/store/">
  			<input type="hidden" name="project_id" value="52769">
			Rate this project on <a href="http://freshmeat.net/" target="_blank">Freshmeat</a>
  			<select name="rating" onchange="submit()">
  			<option value=""></option>
      			<option value="1">1</option>
      			<option value="2">2</option>
      			<option value="3">3</option>
      			<option value="4">4</option>
      			<option value="5">5</option>
      			<option value="6">6</option>
      			<option value="7">7</option>
      			<option value="8">8</option>
      			<option value="9">9</option>
      			<option value="10">10 - Great</option>
    			</select>
  			<noscript>
  				<input type="submit" value="Rate!">
  			</noscript>
		</form>
	</div>

	<div class="menu_title">Support OS3Grid</div>
	<div align="center">
	<a href="http://sourceforge.net/donate/index.php?group_id=132180" target="_blank"><img src="http://images.sourceforge.net/images/project-support.jpg" width="88" height="32" border="0" alt="Support OS3Grid" /> </a>
	</div>
</div>

<div id="block_middle">
	<div class="txt">
	Welcome to the official Home Page of <em>OS3Grid</em> a JavaScript component allowing you to
	create and use powerful grids in your web sites. <br />
	As you can see from the <a href="../examples/index.html">Examples</a>
	<em>OS3Grid</em> is both flexible and powerful,  with a rich set of features and an easy to
	use API for the developer.
	</div>

	<div class="txt" align="center">
		<h3>OS3Grid example</h3>
		In this grid, you'll see some good reasons to use <em>OS3Grid</em>, try sorting reasons for 
		each column or to <b>double click</b> on a cell edit its contents.
	</div>
		<div class="result">
			<div id="grid"></div>
			<script type="text/javascript">
				function val_changed ( grid, x, y, new_val )
				{
					alert ( "On grid: " + grid.id + " x: " + x + " y: " + y + " - value changed to: " + new_val );
				}

				function bold_render ( txt )
				{
					return '<span style="font-weight: bold; color: red;">' + txt + '<\/span>';
				}

				// Create an OS3Grid instance
				var g = new OS3Grid ();

				// Grid Headers are the grid column names
				g.set_headers ( 'feat.no', 'Name', 'Descr', 'Importance' );

				// If contents is bigger than container, Grid will automatically show scrollbars
				g.set_scrollbars ( true );

				// The grid will have a solid border (these are CSS attributes)
				g.set_border ( 1, "solid", "#cccccc" );

				// Now, we add some rows to the grid
				g.add_row ( 1, 'Layout', 'OS3Grid looks like a standard spreadsheet grid', 10 );
				g.add_row ( 2, 'Row Colors', 'You can change the colors of every singular row in the grid', 5 );
				g.add_row ( 3, 'Sorting', 'Rows can be sorted ascending or descending by clicking on column names', 15 );
				g.add_row ( 4, 'Highlight', 'Rows can be highlighted by <em>onmouseover<\/em> events', 5 );
				g.add_row ( 5, 'HTML Embedding', 'Rows can contain any kind of HTML in it', 5 );
				g.add_row ( 6, 'Value Editing', 'Users can edit cell contents on the fly', 20 );
				g.add_row ( 7, 'Input filtering', 'User input can be filtered for special chars only', 15 );
				g.add_row ( 8, 'Input Validation', 'User input can validated with functions', 15 );
				g.add_row ( 9, 'Input callback', 'A JS function can be called as a callback on user input', 10 );
				g.add_row ( 10, 'Free (LGPL)', 'OS3Grid is <em>Free as in freedom<\/em> released under LGPL license.', 20 );
				g.add_row ( 11, 'Column Resize', 'Columns can be resized by positioning the mouse between to headers', 30 );
				g.add_row ( 12, 'Column Renderers', 'Column data can be manipulated before displaying it', 15 );

				// Enable sortable rows
				g.set_sortable ( true );

				// Enable highlight of rows with the mouse
				g.set_highlight ( true );

				g.set_col_align ( 0, "center" );
				g.set_col_align ( 3, "right" );

				g.set_col_editable ( 1, "txt" );
				g.set_col_editable ( 2, "txt" );
				g.set_col_editable ( 3, "txt" );

				g.set_col_render ( 1, bold_render );

				g.onchange = val_changed;
				g.set_col_valid_chars ( 3, "0123456789" );
				g.set_col_validation ( 3, check_integer );

				g.resize_cols = true;

				g.sort_on_edit = true;
				
				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			</script>
		</div>
</div>

</body>
</html>

